<template>
  <view class="cart">
    <!-- 1 列表 -->
    <view class="cart-list">
      <view class="cart-item" v-for="item in cartList" :key="item.goods_id">
        <!-- 1 复选框 -->
        <view class="goods-chk">
          <u-checkbox
            @change="checkboxXun(item.goods_id)"
            :value="item.checked"
            shape="circle"
            active-color="red"
          ></u-checkbox>
        </view>
        <!-- 2 图片 -->
        <view class="goods-img">
          <u-image
            :src="item.goods_small_logo"
            width="191rpx"
            height="191rpx"
          ></u-image>
        </view>
        <!-- 3 信息 -->
        <view class="goods-info">
          <!-- 名称 -->
          <view class="goods-name u-line-2">{{ item.goods_name }}</view>
          <!-- 价格和数量 -->
          <view class="goods-price-num">
            <view class="goods-price"
              ><view class="rmb">￥</view>{{ item.goods_price }}</view
            >
            <view class="goods-num-tool">
              <view
                class="num-btn"
                @click="quantitative(-1, item.goods_id, item.num)"
                >-</view
              >
              <view class="goods-num">{{ item.num }}</view>
              <view
                class="num-btn"
                @click="quantitative(1, item.goods_id, item.num)"
                >+</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 2 统计 -->
    <view class="statistics">
      <view class="all-chk">
        <u-checkbox
          @change="selectAll"
          class="checkbox"
          size="35"
          label-size="21"
          shape="circle"
          active-color="red"
          :value="isChecked"
          ><text>全选</text></u-checkbox
        >
      </view>
      <view class="all-price">
        合计: <text class="text">￥</text
        ><text class="text2">{{ totalPrice }}</text>
      </view>
      <view class="all-count">
        <u-button
          @click="handleGoPay"
          :custom-style="customStyle"
          type="error"
          shape="circle"
          >去结算({{ totalCount }})</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        height: "52rpx",
        fontSize: "21rpx",
      },
    };
  },
  computed: {
    ...mapState("cart", ["cartList"]),
    ...mapGetters("cart", ["isChecked", "totalCount", "totalPrice"]),
  },
  methods: {
    ...mapMutations("cart", [
      "cartToggleCheck",
      "cartQuantitative",
      "cartItemDelete",
      "cartAllToggle",
    ]),
    checkboxXun(goods_id) {
      this.cartToggleCheck({ value: goods_id });
    },
    async quantitative(unit, id, unm) {
      if (unit === -1 && unm === 1) {
        const [err, result] = await uni.showModal({
          title: "提示",
          content: "您是否确认删除",
        });
        if (err) {
          return;
        }
        if (result.confirm) {
          this.cartItemDelete({ value: id });
        }
      } else {
        this.cartQuantitative({ value: { unit, id } });
      }
    },
    selectAll() {
      this.cartAllToggle({ value: this.isChecked });
    },
    handleGoPay() {
      if (this.totalCount == 0) {
        uni.showToast({
          title: "您还没有选购商品哦",
          icon: "none",
        });
      } else {
        uni.navigateTo({ url: "/pages/pay/pay" });
      }
    },
  },
};
</script>

<style lang="scss">
.cart {
  padding-bottom: 111rpx;
  .cart-list {
    .cart-item {
      display: flex;
      padding: 10rpx;
      margin: 0 26rpx;
      border-bottom: 1rpx solid #ccc;
      .goods-chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .goods-img {
        flex: 2;
        margin-right: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .goods-info {
        color: #434343;
        flex: 5;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods-name {
          font-size: 24rpx;
          margin-left: 20rpx;
        }

        .goods-price-num {
          margin-left: 20rpx;
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: $theme-color;
            font-size: 24rpx;
            .rmb {
              font-size: 18rpx;
              display: inline-block;
            }
          }

          .goods-num-tool {
            width: 140rpx;
            height: 40rpx;

            display: flex;
            justify-content: space-between;
            .num-btn {
              border: 1rpx solid #ccc;
              border-radius: 50%;
              width: 40rpx;
              height: 40rpx;
              text-align: center;
              line-height: 40rpx;
            }
          }
        }
      }
    }
  }
  .statistics {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 83rpx;
    z-index: 100;
    border-top: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    padding: 15rpx;
    .all-chk {
      text {
        color: #8a8a8a;
      }
    }

    .all-price {
      flex: 1;
      color: #292929;
      font-size: 26rpx;
      .text {
        font-size: 16rpx;
      }
      .text2 {
        font-size: 28rpx;
      }
    }

    // .all-count {
    // }
  }
}
</style>